<template>
  <div class="upload-test-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>上传功能测试</span>
        </div>
      </template>
      
      <div class="upload-section">
        <el-upload
          class="upload-demo"
          drag
          :auto-upload="false"
          :on-change="handleFileChange"
          :on-remove="handleFileRemove"
          :file-list="fileList"
          accept=".dcm"
          multiple
        >
          <el-icon class="el-icon--upload">
            <UploadFilled />
          </el-icon>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              请上传DICOM格式文件，支持多文件上传
            </div>
          </template>
        </el-upload>
        
        <div class="upload-actions">
          <el-button @click="clearFiles">清空</el-button>
          <el-button 
            type="primary" 
            @click="submitUpload" 
            :disabled="fileList.length === 0 || uploading"
            :loading="uploading"
          >
            {{ uploading ? '上传中...' : '开始上传' }}
          </el-button>
        </div>
      </div>
      
      <div class="result-section" v-if="uploadResult">
        <h3>上传结果:</h3>
        <pre>{{ JSON.stringify(uploadResult, null, 2) }}</pre>
      </div>
      
      <div class="error-section" v-if="uploadError">
        <h3>错误信息:</h3>
        <pre>{{ uploadError }}</pre>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElCard, ElButton, ElUpload, ElIcon, ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import { api } from '@/utils/api'

const fileList = ref([])
const uploading = ref(false)
const uploadResult = ref(null)
const uploadError = ref(null)

// 处理文件选择变化
const handleFileChange = (file, files) => {
  fileList.value = files
  uploadError.value = null
  uploadResult.value = null
}

// 处理文件移除
const handleFileRemove = (file, files) => {
  fileList.value = files
}

// 清空文件列表
const clearFiles = () => {
  fileList.value = []
  uploadError.value = null
  uploadResult.value = null
}

// 提交上传
const submitUpload = async () => {
  if (fileList.value.length === 0) {
    ElMessage.warning('请先选择要上传的文件')
    return
  }

  uploading.value = true
  uploadError.value = null
  uploadResult.value = null
  
  try {
    // 逐个上传文件
    const results = []
    for (let i = 0; i < fileList.value.length; i++) {
      const file = fileList.value[i]
      const result = await uploadSingleFile(file)
      results.push(result)
    }
    
    uploadResult.value = results
    ElMessage.success('所有文件上传完成')
  } catch (error) {
    uploadError.value = error.message || error.toString()
    ElMessage.error('上传过程中出现错误: ' + (error.message || error.toString()))
    console.error('Upload error:', error)
  } finally {
    uploading.value = false
  }
}

// 上传单个文件
const uploadSingleFile = async (file) => {
  try {
    // 创建FormData
    const formData = new FormData()
    formData.append('file', file.raw)
    
    // 上传文件
    const response = await api.uploadFile(formData)
    return response.data
  } catch (error) {
    console.error('Upload single file error:', error)
    throw error
  }
}
</script>

<style scoped>
.upload-test-page {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: calc(100vh - 60px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.upload-section {
  margin-bottom: 20px;
}

.upload-demo {
  margin-bottom: 20px;
}

.upload-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.result-section, .error-section {
  margin-top: 20px;
  padding: 15px;
  border-radius: 4px;
}

.result-section {
  background-color: #f0f9ff;
  border: 1px solid #b3d9ff;
}

.error-section {
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}
</style>